<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="volunteer/user/bootstrap-3.4.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="volunteer/user/bootstrap-3.4.1-dist/VolunteerCss/head.css">
<title>志愿者招募用户--首页</title>
 <style type="text/css">
		#div1{
			/* width: 1050px; */
			height: 53px; 
			background-color: #c2b6df;
			margin: 0 auto;
			/* border: 20px solid #e9eced; */
		}
		h3{
			text-align: center;
			/* font-size: 20px */
		}
		.p1{text-indent: 2em;font-size: 30px;}
		.p2{text-align:left;color:#d34949;}
        p.thicker {font-weight:900;font-size: 30px;}
        /* p.stronger {font-weight:900;font-size: 20px;} */
        p.stronger {font-weight:900;font-size: 25px;text-align:left;}
        p.position{text-align:left;font-size: 17px}
		#div3{text-align: center;font-size: 20px}
        #div4{text-align:center;}
        #myCarousel{
            width:100%;
        /* margin-left:35%; */
        height:100%;}		
	</style>
</head>
<body>
<article>
				  <header><div class="header_con">
                    <div class="header">
                        <div class="welcome">欢迎来到志愿者招募平台!</div>
                        <div class="user_login">
                            <a href="/Volunteer/volunteer/Login&Register.jsp">退出</a>
                            <!-- <span>|</span>
                            <a href="Login&Register.html">注册</a> -->
                        </div>
                    </div>
                </div><br>

                        <img alt="Brand" src="volunteer/img/志愿者图标.png"  width="50px" height="50px" style="float:left"><br>
                         <p class="thicker">"最美"抗疫志愿者招募平台</p1>  
                        </header>
               </article>
             
                <div class="navbar_con">
                    <div class="navbar clearfix">
                        <ul class="navlist fl">
                            <li><a href="${pageContext.request.contextPath}/PersonalServlet">个人中心</a></li>
                            <li><a href="${pageContext.request.contextPath}/ForumServlet">志愿论坛</a></li>
                            <li><a href="${pageContext.request.contextPath}/ElegantServlet">志愿风采</a></li>
                            <li><a href="${pageContext.request.contextPath}/RecruitServlet">志愿者招募</a></li>
                            <div class="subnav_con fl">
                                <h1>首页<i></i></h1>
                            </div>
                        </ul>
                    </div>
                </div><br>
                
                <div class="row">
                    <div class="col-sm-8 col-md-6">
                      <div class="thumbnail" width="300px" height="400px">
                        <div id="myCarousel" class="carousel slide" data-ride="carousel">
                            <!-- 轮播（Carousel）指标 -->
                            <ol class="carousel-indicators">
                                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                <li data-target="#myCarousel" data-slide-to="1"></li>
                                <li data-target="#myCarousel" data-slide-to="2"></li>
                            </ol>   
                            <!-- 轮播（Carousel）项目 -->
                            <div class="carousel-inner">
                                <div class="item active">           
                                    <img src="volunteer/img/志愿者首页2.jpg" alt="Third slide" style="height:360px;width:100%" maigin="0 auto">
                                    <div class="carousel-caption"></div>
                                </div>
                                 <div class="item">
                                    <img src="volunteer/img/志愿者首页1.jpg" alt="Second slide" style="height:360px;width:100%" maigin="0 auto">
                                    <div class="carousel-caption"></div>
                                </div>
                                <div class="item">
                                    <img src="volunteer/img/志愿者首页3.jpg" alt="First slide" style="height:360px;width:100%" maigin="0 auto">
                                    <div class="carousel-caption"></div>
                                </div> 
                            </div>
                            <!-- 轮播（Carousel）导航 -->
                            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                    </div>
      
                      <div class="col-sm-7 col-md-6">
                        <div class="thumbnail" width="200px" height="200px">
                          <!-- <img src="images/志愿者招募.jpg" alt="志愿者招募" class="img-responsive" > -->
                          <!-- <p><a href="#" class="btn btn-success" role="button">进行中</a></p> -->
                          <div class="caption">
                            <p class="stronger" >信息动态</p><hr>
                            <!-- <button type="button" class="btn btn-danger btn-xs" style="float:right;">更多</button> -->
                            <span class="glyphicon glyphicon-record" style="float:left;color:#d34949">&nbsp;</span><button type="button" class="btn btn-danger btn-xs" style="float:left">置顶&nbsp;</button>
                            <a href=""><p class="position">“抗疫东软”抗疫志愿者招募公告</p></a><br>
                            <c:forEach items="${List}" var="a" varStatus="st">
                            <span class="glyphicon glyphicon-record" style="float:left;">&nbsp;</span>
                            <a href=""><p class="position">${a.title}</p></a><br>
                            <!-- <span class="glyphicon glyphicon-record" style="float:left;">&nbsp;</span>
                            <a href=""><p class="position">关于公布2022年度志愿服务评优创先结果的通知</p></a><br>
                            <span class="glyphicon glyphicon-record" style="float:left;">&nbsp;</span>
                            <a href=""><p class="position">关于在东软开展疫情防控志愿服务活动的通知</p></a><br>
                            <span class="glyphicon glyphicon-record" style="float:left;">&nbsp;</span>
                            <a href=""><p class="position">第二届东软志愿服务展示交流会获奖项目</p></a><br> 
                            <span class="glyphicon glyphicon-record" style="float:left;">&nbsp;</span>
                            <a href=""><p class="position">2022年大连东软信息学院疫情防控优秀志愿者名单</p></a><br>
                            <span class="glyphicon glyphicon-record" style="float:left;">&nbsp;</span>
                            <a href=""><p class="position">大连东软信息学院举办志愿服务培训班</p></a> -->
                            </c:forEach>
                            </div>
                            <!-- <p class="p2">距离招募结束：6天 </p> -->
                            <!-- <p><a href="#" class="btn btn-primary" role="button">查看详情</a> <a href="#" class="btn btn-default" role="button">我要报名</a></p> -->
                          </div>
                         </div>
                        </div>
                        <img src="volunteer/img/志愿者首页底部.jpg" alt="志愿者底部" height="20px" class="img-responsive" >
</body>
</html>